<script setup>
import FirstTitle from "@comp/FirstTitle";
import { postTableData } from "@/api/table";
import { onMounted } from "vue";
import { searchDataZymb } from "@/api/search";
import { addOrUpdateZymb } from "@/api/addOrUpdate";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const city = window.globalObj.name;
const editorRef10 = shallowRef();
const valueHtml10 = ref(
  ` 重要目标单位均应建设指挥通信系统，与人防指挥所互联互通，保证省、市、县（区）人防指挥所与目标单位之间指挥信息上传下达，保障重要目标防护工作组织指挥通信顺畅。重要目标单位均应依托重要目标单位生产调度、安防监控、应急指挥等相关场所建立指挥平台，实现与辖区人防指挥机构互联互通。平时应接入党政专网和4G/5G专网、配备超短波集群等指挥通信设备；战时由人防指挥部协调有关部门派出通信保障力量实施保障。需要建设项目如下。`
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `2.能力现状:各目标单位指挥机构接入国防动员信息网XX国家党政专网XX个、民用互联网XX个、超短波数字集群XX个，配备指挥信息系统XX个、电话终端XX个、4G/5G专网XX个。具体情况如下:`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref([]);

// 重要目标防护指挥体系任务需求清单
const rwxqList = ref([]);
const getRwxqData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "zhongyaomubiaofanghuzhihuirenwuxuqiu",
  }).then((res) => {
    if (res.code === 200) {
      rwxqList.value = res?.data || [];
    }
  });
};
// 重要目标防护指挥体系建设情况统计表
const jsqkList = ref([]);
const getJsqkData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "zhongyaomubiaofanghuzhihuitixijiansheqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      jsqkList.value = res?.data || [];
    }
  });
};

// 加载html
const initHtml = () => {
  searchDataZymb({ m: "任务需求指挥体系建设任务需求和能力现状" }).then(
    (res) => {
      const { data } = res;
      valueHtml10.value = data.find((x) => x.k === "任务需求")?.v || "";
      valueHtml11.value = data.find((x) => x.k === "能力现状")?.v || "";
    }
  );
};
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateZymb({
      m: "任务需求指挥体系建设任务需求和能力现状",
      data: [
        {
          k: "任务需求",
          v: valueHtml10.value,
        },
        {
          k: "能力现状",
          v: valueHtml11.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getRwxqData();
  // await getJsqkData();
});
onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="任务需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 text-center">
      {{ city }}重要目标防护指挥体系任务需求清单
    </div>
    <el-table
      id="table"
      :data="rwxqList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="zyjjmbmc" label="重要目标单位名称" />
      <el-table-column prop="guofang" label="国防动员信息网" />
      <el-table-column prop="dagnzheng" label="国家党政专网" />
      <el-table-column prop="minyong" label="民用互联网" />
      <el-table-column prop="chaoduanbo" label="超短波数字集群" />
      <el-table-column prop="zhihui" label="指挥信息系统" />
      <el-table-column prop="dianhua" label="电话终端" />
      <el-table-column prop="zhuanwang" label="4G/5G专网" />
    </el-table>

    <FirstTitle name="能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <!--    <div class="top-15">
      各目标单位指挥机构接入国防动员信息网XX个、国家党政专网XX个、民用互联网XX个、超短波数字集群XX个，配备指挥信息系统XX个、电话终端XX个、4G/5G专网XX个。具体情况如下：
    </div> -->
    <!-- <div class="top-15 text-center">
      {{ city }}重要目标防护指挥体系建设情况统计表
    </div>
    <el-table
      id="table"
      :data="jsqkList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="zyjjmbmc" label="单位名称" />
      <el-table-column prop="guofang" label="国防动员信息网" />
      <el-table-column prop="dagnzheng" label="国家党政专网" />
      <el-table-column prop="minyong" label="民用互联网" />
      <el-table-column prop="chaoduanbo" label="超短波数字集群" />
      <el-table-column prop="zhihui" label="指挥信息系统" />
      <el-table-column prop="dianhua" label="电话终端" />
      <el-table-column prop="zhuanwang" label="4G/5G专网" />
    </el-table> -->
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>